<!-- 新增/修改弹框 -->
<template>
  <!-- 新增/修改弹窗 -->
  <el-dialog
    v-model="dialogDetail.visible"
    :width="900"
    :title="dialogDetail.title"
    draggable
    close-icon="CloseBold"
    @close="closeDialog(false)"
  >
    <el-descriptions v-loading="loading" :column="2" border>
      <el-descriptions-item label="项目名称">{{ detailInfo.projectName }}</el-descriptions-item>
      <el-descriptions-item label="项目编号">{{ detailInfo.projectNum }}</el-descriptions-item>
      <el-descriptions-item label="缴纳主体名称">{{ detailInfo.paymentName }}</el-descriptions-item>
      <el-descriptions-item label="缴纳主体统一社会信用代码">{{ detailInfo.paymentCode }}</el-descriptions-item>
      <el-descriptions-item label="账户编号">{{ detailInfo.guaranteeAccountCode }}</el-descriptions-item>
      <el-descriptions-item label="收支方式">{{ detailInfo.guaranteeAccountTypeName }}</el-descriptions-item>
      <!-- 保证金账户 -->
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 1" label="缴存类型">{{
        detailInfo.depositeTypeName
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 1" label="工资保证金应缴金额">{{
        detailInfo.payable
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 1" label="缴纳金额">{{
        detailInfo.paid
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 1" label="差异化缴存金额">{{
        detailInfo.difference
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 1" label="缴存起始日期">{{
        detailInfo.startDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 1" label="保证金凭证">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId" @click="download(item.attachmentId)">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div></el-descriptions-item
      >
      <!-- 工程担保公司 -->
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="工程担保公司">{{
        detailInfo.guaranteeAccountName
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="工程担保公司信用代码">{{
        detailInfo.socialcreditcode
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="担保公司负责人姓名">{{
        detailInfo.superintendent
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="担保公司负责人电话">{{
        detailInfo.superintendentMobile
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="工程担保公司保函函号">{{
        detailInfo.guaranteeLetterNo
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="工程担保公司担保金额">{{
        detailInfo.paid
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="有效起始日期">{{
        detailInfo.startDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="有效终止日期">{{
        detailInfo.endDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 2" label="担保函凭证">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId" @click="download(item.attachmentId)">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div>
      </el-descriptions-item>
      <!-- 工程保证保险 -->
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="保险公司名称">{{
        detailInfo.guaranteeAccountName
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="保险公司信用代码">{{
        detailInfo.socialcreditcode
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="保险公司负责人姓名">{{
        detailInfo.superintendent
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="保险公司负责人电话">{{
        detailInfo.superintendentMobile
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="保险单号">{{
        detailInfo.guaranteeLetterNo
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="保单金额">{{
        detailInfo.paid
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="有效起始日期">{{
        detailInfo.startDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="有效终止日期">{{
        detailInfo.endDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 3" label="保险凭证">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId" @click="download(item.attachmentId)">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div></el-descriptions-item
      >
      <!-- 银行保函 -->
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="担保银行名称">{{
        detailInfo.guaranteeAccountName
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="银行保函函号">{{
        detailInfo.guaranteeLetterNo
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="银行保函担保金额">{{
        detailInfo.payable
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="缴存类型">{{
        detailInfo.difference
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="已缴纳金额">{{
        detailInfo.paid
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="差异化缴存金额">{{
        detailInfo.difference
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="有效起始日期">{{
        detailInfo.startDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="有效终止日期">{{
        detailInfo.endDate
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.guaranteeAccountType == 4" label="银行保函凭证">
        <div v-for="item in detailInfo.attachments" :key="item.attachmentId" @click="download(item.attachmentId)">
          <el-link type="primary">{{ item.attachmentName }}</el-link>
        </div></el-descriptions-item
      >

      <el-descriptions-item label="创建人">{{ detailInfo.creator }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ detailInfo.createTime }}</el-descriptions-item>

      <el-descriptions-item label="是否已退还">{{ detailInfo.hasReturn ? "是" : "否" }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.hasReturn" label="退还金额">{{
        detailInfo.projectGuaranteeRefund.refundAmount
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.hasReturn" label="退还决定单位名称">{{
        detailInfo.projectGuaranteeRefund.refundOrganization
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.hasReturn" label="退还决定单位统一社会信用代码">{{
        detailInfo.projectGuaranteeRefund.refundOrganizationCode
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.hasReturn" label="动用通知书文号">{{
        detailInfo.projectGuaranteeRefund.notificationLetter
      }}</el-descriptions-item>
      <el-descriptions-item v-if="detailInfo.hasReturn" label="退还时间">{{
        detailInfo.projectGuaranteeRefund.refundTime
      }}</el-descriptions-item>
    </el-descriptions>
  </el-dialog>
</template>

<script lang="ts" setup>
import { GetProjectGuaranteePayment } from "@/api/guarantee/index";
import { downloadFile } from "@/utils";
import { downloadAttachment } from "@/api/common/other/index";

const props = defineProps({
  dialogDetail: {
    type: Object,
    default: () => ({
      visible: false,
      title: "审核退还信息",
      footBtn: "提交",
      id: 0,
    }),
  },
});

const { dialogDetail } = toRefs(props);

const emit = defineEmits(["sendClose"]);

const loading = ref(false);
const detailInfo = ref<any>({});
const download = (id: string) => {
  downloadAttachment(id).then((res) => {
    downloadFile(res);
  });
};

onMounted(() => {
  loading.value = true;
  GetProjectGuaranteePayment(dialogDetail.value.id)
    .then((res) => {
      Object.assign(detailInfo.value, res.data);
    })
    .finally(() => {
      loading.value = false;
    });
});

/**
 * 关闭弹窗
 */
function closeDialog(query: boolean) {
  emit("sendClose", query);
}
</script>

<style lang="scss" scoped>
.d_left {
  margin-left: 10px;
}
:deep(.el-form-item) {
  flex-wrap: wrap;
}

:deep(.el-input) {
  width: 80%;
}

:deep(.el-select) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  width: 100%;
}

:deep(.el-form-item__label) {
  color: #696868;
  font-size: 13px;
}
</style>
